import Tabs from '@/components/Tabs';
import { useIntl } from '@umijs/max';
import { Divider } from 'antd';
import React from 'react';
import Styles from '../index.less';
import ACParams from './ParamaInfoForm/ACParams';
import BaseInfo from './ParamaInfoForm/BaseInfo';
import CellParams from './ParamaInfoForm/CellParams';
import DCParams from './ParamaInfoForm/DCParams';
import SystemParams from './ParamaInfoForm/SystemParams';

type ParamsInfoObj = {
  baseInfo?: API.DeviceManagerDTO;
  DCInfo?: API.DcInfoDTO;
  ACInfo?: API.AcInfoDTO;
  cellInfo?: API.BatteryCellInfoDTO;
  SysInfo?: API.SystemInfoDTO;
};
type IProps = {
  paramsTotalInfo: ParamsInfoObj;
  selectedDeviceType: string | undefined;
};

const ParamsInfo: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { paramsTotalInfo, selectedDeviceType } = props;
  const items = [
    {
      key: '1',
      label: intl.formatMessage({ id: 'device.basicInfo' }),
      children: <BaseInfo baseInfo={paramsTotalInfo?.baseInfo} deviceType={selectedDeviceType} />,
    },

    selectedDeviceType !== 'BOX' && {
      key: '2',
      label: intl.formatMessage({ id: 'device.acParameters' }),
      children: <ACParams ACInfo={paramsTotalInfo?.ACInfo} deviceType={selectedDeviceType} />,
    },
    {
      key: '3',
      label: intl.formatMessage({ id: 'device.dcParameters' }),
      children: <DCParams DCInfo={paramsTotalInfo?.DCInfo} deviceType={selectedDeviceType} />,
    },
    {
      key: '4',
      label: intl.formatMessage({ id: 'device.systemParameters' }),
      children: <SystemParams SysInfo={paramsTotalInfo?.SysInfo} deviceType={selectedDeviceType} />,
    },
    selectedDeviceType !== 'PCS' && {
      key: '5',
      label: intl.formatMessage({ id: 'device.cellParameters' }),
      children: <CellParams cellInfo={paramsTotalInfo?.cellInfo} />,
    },
  ];
  return (
    <div style={{ padding: '0 20px 20px', width: '73%' }}>
      <div className={Styles.rightSubTitle}>
        {intl.formatMessage({ id: 'device.detailedParameterInfo' })}
      </div>
      <Divider></Divider>
      <Tabs items={items} size={'small'} rootClassName={Styles.paramsForm}></Tabs>
    </div>
  );
};
export default ParamsInfo;
